<template>
<view class="login_view">
	<view class="container my_border_radius">
		<view class="title">
			DRMApp
		</view>
		<u-form :model="form" ref="uForm">
			<u-form-item 
				label="账号" 
				prop="name"
				:border-bottom="false"
				label-position="top">
				<input 
					class="uni-input" placeholder="请输入账号" 
					v-model="form.name"/>
			</u-form-item>
			<u-form-item 
				label="密码" 
				prop="password"
				:border-bottom="false"
				label-position="top"
				:label-style="{
					marginTop:'20px',
				}">
				<input
					class="uni-input" placeholder="请输入密码" 
					:password="true"
					v-model = "form.password"/>
			</u-form-item>
		</u-form>
		<view
            class="login_bt"
			@click="onLogin">
			<u-icon
                v-if="!loading"
                name="arrow-rightward">
            </u-icon>
            <u-loading 
                v-else
                mode="flower">
            </u-loading>
		</view>
	</view>
	<u-toast ref="uToast"/>
</view>
</template>

<script>
//登陆页面视图
import {login} from"@/common/api";
export default {
	name:"LoginView",
	data() {
		return {
			form: {
				name: 'admin',
				password: 'admin',
			},
			loading:false, //登陆等待动画
			//数据验证规则
			rules: {
				name: [
					{
						required: true,
						message: '请输入账号',
						trigger: ['blur', 'change']
					}
				],
				password: [
					{
						required: true,
						message: '请输入密码',
						trigger: ['blur', 'change']
					}
				]
			}
		};
	},
	onReady() {
		this.$refs.uForm.setRules(this.rules);
	},
	methods:{
		onLogin() {
			this.$refs.uForm.validate(valid => {
				if (valid) {
					this.loading = true;
					login(
                        {
                            pwd:this.form.password,
                            uname:this.form.name,
                        },
                    ).then(data=>{
                        this.$store.commit('setUser',data);
                        uni.switchTab({
                            url: '/pages/home/index',
                        });
                    }).catch(msg=>{
                        this.form.password = "";
                        this.$refs.uToast.show({
                            title: msg,
                            position:'top',
                            type: 'error',
                        });
                    }).finally(()=>{
                        this.loading=false;
                    });
				}
			});
		},
	},
}
</script>

<style lang="scss" scoped>
.login_view{
	width: 100vw;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	.container{
		width: 75vw;
		height: fit-content;
		z-index: 999;
		>.title{
			font-size: 60rpx;
			font-weight: bold;
			width: 100%;
			text-align: center;
			margin-bottom: 7vh;
			color: #364f6b;
		}
        .u-form{
            width: 100%;
            .u-form-item{
                width: 100%;
                font-size: 30rpx;
                color: #364f6b;
                padding: 0 !important;
                input{
                    width: 100%;
                    border-radius: 10rpx !important;
                    background-color: #f4f5f7;
                    padding: 30rpx 20rpx;
                    box-sizing: border-box;
                    height: fit-content;
                    font-size: 30rpx;
                }
                .u-form-item--left{
                    margin-bottom:0px !important;
                    opacity: 0.5;
                    font-size: 15px;
                }
            }
        }
	}
    .login_bt{
        margin: 0 auto;
        margin-top: 130rpx;
        width: 140rpx;
        height: 140rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 50%;
        background-color: #253F73;
        font-size: 50rpx;
        color: #ffffff;
        background-image: linear-gradient(-90deg, #29bdd9 0%, #276ace 100%);
        box-shadow: 0 10px 40px -10px rgba(0,64,128,.2);
    }
}
</style>
